<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>00_引入</title>
  </head>

  <body>

    <button>测试1</button>
    <button>测试2</button>
    <button>测试3</button>
    <!--
需求: 点击某个按钮, 提示"点击的是第n个按钮"
-->
    <script type="text/javascript">
      var btns = document.getElementsByTagName('button')
      //遍历加监听

      for (var i = 0, length = btns.length; i < length; i++) {
        var btn = btns[i]
        btn.onclick = function () {
          alert('第' + (i + 1) + '个')
        }
      }

      /*  for (var i = 0, length = btns.length; i < length; i++) {
         var btn = btns[i]
         //将btn所对应的下标保存在btn上
         btn.index = i
         btn.onclick = function () {
           alert('第' + (this.index + 1) + '个')
         }
       } */

      //利用闭包
      /* for (var i = 0, length = btns.length; i < length; i++) {
        (function (j) {
          var btn = btns[j]
          btn.onclick = function () {
            alert('第' + (j + 1) + '个')
          }
        })(i)
      } */

      /* for (let i = 0, length = btns.length; i < length; i++) {
        let btn = btns[i];
        btn.onclick = () => {
          alert(`第${i+1}个`);
        }
      } */
    </script>
  </body>

</html>